import  React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image,
    Text,
    FlatList
}from 'react-native';

let {width, height}  = require('Dimensions').get('window');

const KyscollerView  = require('./KyScrollView');

class  KyFlatList extends  Component{
    constructor(props){
        super(props);
        this.state = {
            data:[]
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <FlatList
                          refs = "flatList"
                          data = {this.state.data}
                          renderItem = {(item)=>this._renderItem(item)}
                          ItemSeparatorComponent = {this._ItemSeparatorComponent}
                          refreshing={true}
                          ListEmptyComponent = {this._ListEmptyComponent}
                          onRefresh={()=>{
                              this._refresh();
                          }} // 刷新方法,写了此方法，下拉才会出现  刷新控件，使用此方法必须写 refreshing
                          numColumns ={1}
                          ListHeaderComponent = {this._ListHeaderComponent}
                          ListFooterComponent = {this._ListFooterComponent}
                          onEndReached = {()=>{
                              this._onEndReached();
                          }}
                          onEndReachedThreshold = {0}


                />

            </View>

        )
    }
    componentDidMount(){

       this._loadData().then((json)=>{
            this.setState({
                data:json.data
            })

       });
    }
    _loadData(){
       return fetch(this.props.url)
            .then((resposeData)=>resposeData.json())
            .then((jsonData)=>jsonData)
            .catch((error)=>{
               console.log(error);
            });
    }
    _renderItem(itemData){
        let imgUrl = 'http:' + itemData.item.banner_rsurl;
        let price = '$' + itemData.item.sale_price;
        return(
            <View style={styles.itemStyle}>
               <Image style={styles.imgStyle} source={{uri:imgUrl}}></Image>
                <Text style={styles.textStyle}>
                    {itemData.item.product_name}
                </Text>
                <View style={styles.bottomStyle}>
                    <Text style={styles.cityStyle}>{itemData.item.merchant_city}</Text>
                    <Text style={styles.priceStyle}>{price}</Text>
                </View>
            </View>
        )

    }
    _ItemSeparatorComponent(){
        return(
            <View style={{height:1,width:200,backgroundColor:'#e8e8e8'}}></View>
        )

    }
    _ListEmptyComponent(){
        console.log('hello');
        return(
            <View style={[styles.container,{backgroundColor:'red'}]}>
                <Text>hello</Text>
            </View>
        )
    }
    _refresh(){

        let that = this;
        setInterval(function () {
            that.setState({
                data:that.state.data + that.state.data

            })
        },1000);
        console.log('##########')
        console.log(that.state.data)
    }
    _ListHeaderComponent(){
        return(
            <KyscollerView style={{height:250,marginBottom:10}}/>
        )
    }
    _ListFooterComponent(){
        return(
            <View style={{height:40,backgroundColor:'red',justifyContent:'center',alignItems:'center'}}>
                <Text style={{color:'white',fontSize:18}}>我是尾部</Text>
            </View>
        )
    }
    _onEndReached(){
        console.log('_onEndReached');
    }
}
KyFlatList.defaultProps = {
    url:'http://open.yooyo.com/rtapi/outer/router.json?app_key=yooyo_weekend&method=emall.product.list&app_id=2&come_from=2&format=json&from=iOS&partner_id=100&tags=%E4%BC%98%E9%80%89%E8%A1%8C%E7%A8%8B&timestamp=1509875195514&version=5'
}
const styles = StyleSheet.create({
    container:{
        flex:1,

    },
    itemStyle:{
       marginBottom:10
    },
    imgStyle:{
        height:220

    },
    textStyle:{
        color:'gray',
        fontSize:16,
        margin:8
    },
    bottomStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        margin:10,



    },
    cityStyle:{
        width:50,
        height:20,
        backgroundColor:'green',
        color:'white',
        textAlign:'center',
        lineHeight:20,
        borderRadius:8,
        overflow:'hidden',
        alignItems:'center',
        alignSelf:'center'
    },
    priceStyle:{
        color:'red',
        fontSize:18
    }
});

module.exports = KyFlatList;



